import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { BarChart as _BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, LegendComponent, _BarChart, CanvasRenderer]);

const colors = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.5, color: '#1890ff' },
    { offset: 0, color: '#1890ff' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.6, color: '#4dc9c5' },
    { offset: 0, color: '#4dc9c5' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.6, color: '#ff922e' },
    { offset: 0, color: '#ff922e' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.6, color: '#ff594c' },
    { offset: 0, color: '#ff594c' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.6, color: '#fad337' },
    { offset: 0, color: '#fad337' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 1, color: '#fff' },
    { offset: 0.6, color: '#4dcb73' },
    { offset: 0, color: '#4dcb73' },
  ]),
];

const _config = {
  type: 'bar',
  label: {
    show: true,
    position: 'bottom',
    offset: [0, 4],
    formatter: (params: { seriesName: string }) => params.seriesName,
  },
  barWidth: 12,
};

const BarChart: React.FC<any> = ({
  data,
  title,
  name,
  left,
  pl = 40,
  width = 540,
  barGap = 15,
  config = _config,
}) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current && data) {
      const total = data.reduce((cur: number, prev: { data: any[] }) => (cur += prev.data[0]), 0);

      const chartInstance = echarts.init(chartRef.current);

      const option: echarts.EChartsCoreOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (props: { seriesName: any; color: any; percent: any; value: any }[]) => {
            let _html = `<div>${title}</div>`;

            props.forEach(({ seriesName, value, color }) => {
              _html += `
                <div style="display: flex;align-items: center;">
                  <div style="width: 100px;display: flex;align-items: center;gap:4px"><div style="padding: 4px;background-color: ${
                    color.colorStops[2].color
                  }"></div> ${seriesName}：</div>
                  <div style="width: 60px; text-align: right;">${value}</div> 
                  <div style="width: 60px; text-align: right;">${
                    Math.round((value / total) * 100) || 0
                  }%</div> 
                </div>
              `;
            });

            return _html;
          },
        },
        legend: {
          type: 'scroll',
          top: 0,
          left,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 6,
          right: 0,
          pageIconSize: 8,
          pageFormatter: '{current} / {total}',
          pageIcons: {
            vertical: [
              'path://M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z',
              'path://M714.19904 549.84704l-328.704 328.69376c-20.91008 20.91008-54.80448 20.91008-75.70432 0-20.89984-20.89984-20.89984-54.80448 0-75.70432L600.63744 512 309.80096 221.16352c-20.89984-20.91008-20.89984-54.80448 0-75.70432 20.89984-20.91008 54.79424-20.91008 75.70432 0l328.704 328.69376c10.4448 10.45504 15.6672 24.14592 15.6672 37.84704S724.64384 539.40224 714.19904 549.84704z',
            ],
          },
          textStyle: {
            height: 18,
            lineHeight: 1,
          },
        },
        grid: {
          left: 20,
          right: 0,
          top: 35,
          bottom: 0,
          containLabel: true, // 如果有需要包含坐标轴标签，可以设置此项
        },
        xAxis: {
          type: 'category',
          show: false,
        },
        yAxis: [
          {
            type: 'value',
            name,
            nameTextStyle: {
              padding: [0, 0, 0, pl],
            },
          },
        ],
        series: data.map((item: any, index: number) => ({
          ...config,
          ...item,
          barGap,
          itemStyle: {
            barBorderRadius: [30, 30, 0, 0],
            color: colors[index],
          },
        })),
      };

      chartInstance.setOption(option);

      return () => {
        chartInstance.dispose();
      };
    }

    return;
  }, [chartRef.current, data]);

  return <div ref={chartRef} style={{ width, maxWidth: width, minWidth: width, height: 200 }} />;
};

export default BarChart;